<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<base href="${base}" />
<title>室内环境监控系统</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="novafitness co.">
<link type="text/css" rel="stylesheet" href="${base}/plugins/formValidator4.0.1/style/validatorTidyMode.css" />
<link rel="stylesheet" type="text/css" href="${base}/plugins/home.css" media="all" />
<link rel="stylesheet" type="text/css" href="${base}/plugins/table.css" media="all" />
<!-- Bootstrap -->
<link id="bootstrapCss" rel="stylesheet" href="${base}/plugins/zui/css/zui.css" />
<link id="bootstrapCss" rel="stylesheet" href="${base}/plugins/zui/lib/datetimepicker/datetimepicker.css" />
<style type="text/css">
.loadconfigurea {
	float: right;
	text-decoration: none;
}

#machineinfodiv {
	transition: all 250ms;
}

#configureformdiv {
	transition: all 250ms;
}
</style>
<script type="text/javascript">
	var base = '${base}';
</script>
<script id="table-template" type="text/x-handlebars-template">
 {{#each this}}
	<li class="list-group-item">
			<div class="checkbox">
			<label> <input type="checkbox" name="deviceModel.id" value="{{id}}"> {{devicename}}
			</label>
<a title="加载配置" class="loadconfigurea" href="javascript:loadconfigure('{{id}}')"  > <i class="icon-forward"></i> </a>
			</div>
	</li>
{{/each}}
</script>
<style>
body {
	font-family: 'microsoft yahei';
	font-size: 16px;
	min-width: 1024px;
}

.logo {
	height: 100px;
}

.menu li {
	width: 150px;
	text-align: center;
	padding: 0;
	'
}

.help-block {
	color: #f00;
	display: none;
}

.rooms {
	background-color: #F4F4F4;
}
</style>
<style type="text/css" adt="123"></style>
<style type="text/css">
object, embed {
	-webkit-animation-duration: .001s;
	-webkit-animation-name: playerInserted;
	-ms-animation-duration: .001s;
	-ms-animation-name: playerInserted;
	-o-animation-duration: .001s;
	-o-animation-name: playerInserted;
	animation-duration: .001s;
	animation-name: playerInserted;
}

@
-webkit-keyframes playerInserted {
	from {opacity: 0.99;
}

to {
	opacity: 1;
}

}
@
-ms-keyframes playerInserted {
	from {opacity: 0.99;
}

to {
	opacity: 1;
}

}
@
-o-keyframes playerInserted {
	from {opacity: 0.99;
}

to {
	opacity: 1;
}

}
@
keyframes playerInserted {
	from {opacity: 0.99;
}

to {
	opacity: 1;
}

}
a {
	text-decoration: none;
}

a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a:active {
	text-decoration: none;
}

.labeldiv {
	text-align: right;
}
</style>


<script id="datalist" type="text/x-handlebars-template">
{{#each this}}
  <tr>
    <td>{{mid}}</td>
    <td>{{primaryfilterlife}}</td>
    <td>{{electrostaticdustoflife}}</td>
    <td>{{highefficiencyfilterlife}}</td>
    <td>{{primaryfilterlife_overdue}}</td>
    <td>{{electrostaticdustoflife_overdue}}</td>
    <td>{{highefficiencyfilterlife_overdue}}</td>
    <td style="text-align:center;"><a href="javascript:submitquery('{{id}}')"><i class="icon-random"></i></a></td>
  </tr> 
{{/each}}
</script>
</head>
<body youdao="bind" ryt12934="1">
	<div class="container" style="width: 1024px;">
		<% layout("/common/header.html"){} %>

		<ul id="myTab" class="nav nav-tabs">
			<li class="active"><a href="#tab1" data-toggle="tab">查询滤网寿命</a></li>
			<li><a href="#tab2" data-toggle="tab">初始化滤网设置</a></li>
		</ul>

		<div class="tab-content">
			<div class="tab-pane in active" id="tab1">
				<div class="jumbotron">
					<div class="btn-group">
						<button type="button" class="btn btn-lg" id="addinfobtn" onclick="getfilterinfo()">刷新</button>
					</div>
					<table class="table table-bordered table-striped" id="datatable">
						<thead>
							<tr>
								<th class='text-center'>设备编号</th>
								<th>初效过滤寿命<br />单位：小时
								</th>
								<th>静电除尘寿命<br />单位：小时
								</th>
								<th>高效过滤寿命<br />单位：小时
								</th>
								<th>初效过滤是否过期<br />(0没过期，1过期)
								</th>
								<th>静电除尘是否过期<br />(0没过期，1过期)
								</th>
								<th>高效过滤是否过期<br />(0没过期，1过期)
								</th>
								<th>设备数据同步</th>
							</tr>
						</thead>
						<tbody id="showfilterinfo">
						</tbody>
					</table>
				</div>
			</div>
			<div class="tab-pane" id="tab2">
				<div class="row">
					<div class="col-xs-3" id="machineinfodiv">
						<h3>选择机器：</h3>
						<form action="" id="machineinfo">
							<ul class="list-group" id="machineinfo">
								<li class="list-group-item"><div class="checkbox">
										<label> <input type="checkbox" value="">
										</label>
									</div></li>
							</ul>
						</form>
					</div>

					<div class="col-xs-9" id="configureformdiv">
						<form id="configureform">
							<h3>滤网配置：</h3>

							<div class="row" id="setupinfo">
								<div class="col-xs-3 labeldiv">
									<label for="primaryfilterlife_set">初效过滤寿命：</label>
								</div>
								<div class="col-xs-3 inputdiv">
									<input title="" maxlength="5" type="text" class="form-control num" id="primaryfilterlife_set"
										name="deviceModel.primaryfilterlife_set">
								</div>
								<div class="col-xs-3 labeldiv">
									<label for="electrostaticdustoflife_set">静电除尘寿命：</label>
								</div>
								<div class="col-xs-3 inputdiv">
									<input title="" maxlength="5" type="text" class="form-control num" id="electrostaticdustoflife_set"
										name="deviceModel.electrostaticdustoflife_set">
								</div>

								<div class="col-xs-3 labeldiv">
									<label for="highefficiencyfilterlife_set">高效过滤寿命：</label>
								</div>
								<div class="col-xs-3 inputdiv">
									<input title="" maxlength="5" type="text" class="form-control num" id="highefficiencyfilterlife_set"
										name="deviceModel.highefficiencyfilterlife_set">
								</div>

								<div class="col-xs-3 labeldiv">
									<label for="primaryfilterlife_reset">复位初效过滤：</label>
								</div>
								<div class="col-xs-3 inputdiv">
									<input title="" maxlength="1" type="text" class="form-control num" id="primaryfilterlife_reset"
										name="deviceModel.primaryfilterlife_reset">
								</div>


								<div class="col-xs-3 labeldiv">
									<label for="electrostaticdustoflife_reset">复位静电除尘：</label>
								</div>
								<div class="col-xs-3 inputdiv">
									<input title="" maxlength="1" type="text" class="form-control num" id="electrostaticdustoflife_reset"
										name="deviceModel.electrostaticdustoflife_reset">
								</div>
								<div class="col-xs-3 labeldiv">
									<label for="highefficiencyfilterlife_reset">复位高效过滤：</label>
								</div>
								<div class="col-xs-3 inputdiv">
									<input title="" maxlength="1" type="text" class="form-control num" id="highefficiencyfilterlife_reset"
										name="deviceModel.highefficiencyfilterlife_reset">
								</div>


							</div>
							<br />
							<div class="col-xs-12" style="text-align: center;">
								<input type="button" id="submitconfig" style="width: 100%" value="提交" class="btn btn-primary" />
							</div>

						</form>
					</div>

				</div>
			</div>
		</div>

	</div>
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script id="jquery" src="${base}/plugins/jquery.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script id="bootstrapJs" type="text/javascript" src="${base}/plugins/zui/js/zui.js"></script>
	<script id="bootstrapJs" type="text/javascript" src="${base}/plugins/zui/lib/datetimepicker/datetimepicker.js"></script>
	<script type="text/javascript" src="${base}/plugins/handlebars.js"></script>
	<script type="text/javascript" src="${base}/plugins/loadScripts.js"></script>

	<script src="${base}/plugins/formValidator4.0.1/formValidator-4.0.1.js" type="text/javascript"></script>
	<script src="${base}/plugins/formValidator4.0.1/formValidatorRegex.js" type="text/javascript"></script>
</body>

<script type="text/javascript">
	var validateform;
	$(function(e) {
		getDeviceData();

		$("#setupinfo input.num").keyup(
				function(e) {
					if (isNaN($(this).val())) {
						$(this).val(
								$(this).val().substring(0,
										$(this).val().length - 1));
					}
				})

		$('.form-datetime').datetimepicker({
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 2,
			forceParse : 0,
			showMeridian : 1,
			format : 'yyyy-mm-dd hh:ii'
		});

		$('.form-time').datetimepicker({
			language : 'zh-CN',
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 1,
			minView : 0,
			maxView : 1,
			forceParse : 0,
			format : 'hh:ii'
		});

		$("#submitconfig").click(function(e) {
			var names = $("#machineinfo input[type='checkbox']:checked");
			if (names.length == 0) {
				$("#machineinfodiv").css('transform', 'rotate(10deg)');
				setTimeout(function() {
					$("#machineinfodiv").css('transform', 'rotate(-10deg)')
				}, 250)
				setTimeout(function() {
					$("#machineinfodiv").css('transform', 'rotate(0deg)')
				}, 500)
				//alert("请选择更新的设备！");
				var msg = new $.Messager('请选择需要更新的设备！', {
					type : 'warning',
					placement : 'bottom'
				});
				msg.show();
				return;
			}
			var flag = $.formValidator.pageIsValid();
			if (flag) {
				$.ajax({
					url : "${base}/submitFilterInfo",
					dataType : 'json',
					data : $("#machineinfo,#configureform").serialize(),
					type : 'post',
					success : function(data) {
						var msg = new $.Messager(data.msg, {
							type : 'success',
							placement : 'bottom'
						});
						msg.show();
						//alert(data.msg);
					}
				});
			}
		});

		$.formValidator.initConfig({
			formID : "configureform",
			autoTip : true,
			tidyMode : true,
			onError : function(a, b, c) {
				var msg = new $.Messager(a, {
					type : 'warning',
					placement : 'bottom'
				});
				msg.show();
				$(b).focus();

				$("#configureformdiv").css('transform', 'rotate(5deg)');
				setTimeout(function() {
					$("#configureformdiv").css('transform', 'rotate(-5deg)')
				}, 250)
				setTimeout(function() {
					$("#configureformdiv").css('transform', 'rotate(0deg)')
				}, 500)

			}
		});

		$("#primaryfilterlife_set").formValidator({
			onShow : "初效过滤寿命单位：小时",
			onFocus : "初效过滤寿命单位：小时",
			onCorrect : "输入正确"
		}).inputValidator({
			min : 0,
			max : 65535,
			type : "value",
			onError : "初效过滤寿命单位：小时,最小0，最大65535"
		});
		$("#electrostaticdustoflife_set").formValidator({
			onShow : "静电除尘寿命单位：小时",
			onFocus : "静电除尘寿命单位：小时",
			onCorrect : "输入正确"
		}).inputValidator({
			min : 0,
			max : 65535,
			type : "value",
			onError : "初效过滤寿命单位：小时,最小0，最大65535"
		});
		$("#highefficiencyfilterlife_set").formValidator({
			onShow : "高效过滤寿命单位：小时",
			onFocus : "高效过滤寿命单位：小时",
			onCorrect : "输入正确"
		}).inputValidator({
			min : 0,
			max : 65535,
			type : "value",
			onError : "初效过滤寿命单位：小时,最小0，最大65535"
		});

		$("#primaryfilterlife_reset").formValidator({
			onShow : "复位初效过滤 1：有效",
			onFocus : "复位初效过滤 1：有效",
			onCorrect : "输入正确"
		}).inputValidator({
			min : 0,
			max : 1,
			type : "value",
			onError : "复位初效过滤 1：复位，0：不复位"
		});
		$("#electrostaticdustoflife_reset").formValidator({
			onShow : "复位静电除尘 1：有效",
			onFocus : "复位静电除尘 1：有效",
			onCorrect : "输入正确"
		}).inputValidator({
			min : 0,
			max : 1,
			type : "value",
			onError : "复位静电除尘 1：复位，0：不复位"
		});
		$("#highefficiencyfilterlife_reset").formValidator({
			onShow : "复位高效过滤 1：有效",
			onFocus : "复位高效过滤 1：有效",
			onCorrect : "输入正确"
		}).inputValidator({
			min : 0,
			max : 1,
			type : "value",
			onError : "复位高效过滤  1：复位，0：不复位"
		});

		getfilterinfo();
		$('#datatable').datatable({
			fixedHeaderOffset : 0,
			checkable : false
		});

		setInterval(getfilterinfo, 5000);
	})

	function getfilterinfo() {
		$.ajax({
			url : '${base}/getFilterInfoAll',
			type : 'post',
			dataType : 'json',
			success : function(data) {
				var myTemplate = Handlebars.compile($("#datalist").html());
				$('#showfilterinfo').html(myTemplate(data));
				$('#datatable').datatable('load')
			}
		});
	}

	function getDeviceData() {
		$("#machineinfo").html("");
		$.ajax({
			url : "${base}/getData",
			dataType : 'json',
			type : 'post',
			success : function(data) {
				var myTemplate = Handlebars
						.compile($("#table-template").html());

				$('#machineinfo').html(myTemplate(data));
			}
		});

	}
	function loadconfigure(id) {
		$.ajax({
			url : "${base}/getFilterInfo",
			dataType : 'json',
			type : 'post',
			data : 'id=' + id,
			success : function(data) {

				$("#configureform")[0].reset();
				if (data.flag) {
					var msg = new $.Messager(data.msg, {
						type : 'success',
						placement : 'bottom'
					});
					msg.show();
					//alert(data.msg);
				} else {
					for ( var x in data) {
						$("#" + x).val(data[x]);
					}
					var msg = new $.Messager("数据加载成功！", {
						type : 'success',
						placement : 'bottom'
					});
					msg.show();
					$("#configureformdiv").css('transform', 'rotate(5deg)');
					setTimeout(function() {
						$("#configureformdiv")
								.css('transform', 'rotate(-5deg)')
					}, 250)
					setTimeout(function() {
						$("#configureformdiv").css('transform', 'rotate(0deg)')
					}, 500)
				}
			}
		});
	}
	function submitquery(id) {
		$.ajax({
			url : "${base}/submitquery",
			dataType : 'json',
			type : 'post',
			data : 'id=' + id,
			success : function(data) {
				var msg = new $.Messager(data.msg, {
					type : 'success',
					placement : 'bottom'
				});
				msg.show();
			}
		});
	}
</script>
</html>